<template>
  <div>
    <el-header class="el-header2" height="35px">
      <el-breadcrumb
        style="margin-left: 10px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-card>
      <el-button
        type="primary"
        class="button1"
        size="big"
        @click="dialog = !dialog"
        v-if="$store.getters.getUserInfoRoleid == '1'"
        >添加分类</el-button
      >
      <tree-table
        class="treetable"
        :data="list"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
      >
        <template slot="isok" slot-scope="">
          <i class="el-icon-circle-check" style="color: lightgreen"></i>
          <!-- <i class="el-icon-circle-close" style="color: red"></i> -->
        </template>

        <!-- 级别 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" v-if="scope.row.cat_level === 1" type="success"
            >二级</el-tag
          >
        </template>
        <template slot-scope="scope" slot="opt">
          <!-- {{ scope.row.cat_id }} -->
          <el-button
            type="primary"
            size="small"
            @click="showChange(scope.row)"
            v-if="$store.getters.getUserInfoRoleid == '1'"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteCateItem(scope.row.cat_id)"
            v-if="$store.getters.getUserInfoRoleid == '1'"
            >删除</el-button
          >
          <el-button v-if="$store.getters.getUserInfoRoleid != 1">
            你没有权限噢
          </el-button>
        </template>
      </tree-table>
    </el-card>

    <!-- 添加分类抽屉 -->
    <el-drawer
      title="我嵌套了 Form !"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <el-form
        class="elform"
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        width="90px"
      >
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父类:" prop="cat_pid">
          <!-- <el-input v-model="addForm.cat_pid"></el-input> -->
          <el-cascader
            expand-trigger="hover"
            :clearable="true"
            v-model="cascaderselectkey"
            :options="list"
            :props="cascaderprops"
            @change="cascaderChange"
            clearCheckedNodes
            :checkStrictly="true"
            placeholder="默认为最高级分类"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <el-row type="flex" gutter="10" style="margin-top: '10px'">
        <el-col span="12" offset="5"
          ><el-button @click="cancelAdd">取 消</el-button></el-col
        >
        <el-col span="12">
          <el-button type="primary" @click="sendAddList"
            >确定</el-button
          ></el-col
        >
      </el-row>
    </el-drawer>

    <!-- 修改分类抽屉 -->
    <el-drawer
      title="我嵌套了 Form !"
      :visible.sync="dialog2"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <el-form
        class="elform"
        :model="editForm"
        ref="editFormFormRef"
        label-width="70px"
        width="100px"
      >
        <el-form-item label="用户名" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" gutter="10" style="margin-top: '10px'">
        <el-col span="12" offset="5"
          ><el-button @click="dialog2 = !dialog2">取 消</el-button></el-col
        >
        <el-col span="12">
          <el-button type="primary" @click="sendChangeInfo()"
            >确定</el-button
          ></el-col
        >
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类数据
      List0: [],
      list00: [],
      List1: [],
      list: [],

      // // 修改分类
      editForm: {
        cat_name: "",
        cat_id: -1,
      },
      dialog2: false,

      // 添加分类
      dialog: false,
      addForm: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      addFormRules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      // 级联选择器 对象表
      cascaderprops: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: true,
      },
      // 级联选中的东东 ,同时 级联一改变 就会触发cascaderChange
      cascaderselectkey: [],

      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
        },
        {
          label: "分类级别",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
    };
  },
  async created() {
    this.resetPage();
  },
  mounted() {
    this.flag = true;
  },
  methods: {
    async resetPage() {
      await this.getList0();
      await this.getList1();
      await this.list1AddtoList0();
      console.log(this.list);
    },
    // 添加分类
    // 取消添加
    cancelAdd() {
      this.$refs.addFormRef.resetFields();
      this.dialog = !this.dialog;
    },
    // 级别联合改变
    cascaderChange() {
      console.log(this.cascaderselectkey);
      if (this.cascaderselectkey.length > 0) {
        this.addForm.cat_pid = this.cascaderselectkey[
          this.cascaderselectkey.length - 1
        ];
        this.addForm.cat_level = 1;
        // console.log(this.addForm);
        // {
        //   cat_level: 1;
        //   cat_name: "111";
        //   cat_pid: 5;
        // }
      } else {
        this.addForm.cat_level = 0;
        this.cat_pid = 0;
      }
    },
    // 添加分类 -确定
    async sendAddList() {
      console.log(this.addForm);
      const { data } = await this.axios({
        url: "/goods/addList",
        method: "post",
        data: this.addForm,
      });
      if (data.meta.status === 200) {
        this.$message.success("添加成功");
      } else {
        this.$message.error("添加失败");
      }
      this.$refs.addFormRef.resetFields();
      this.dialog = !this.dialog;
      this.resetPage();
    },

    async getList0() {
      const { data } = await this.axios({
        method: "get",
        url: "/goods/getList0",
      });
      // console.log(data);
      this.list = data;
      console.log(this.list);
      return data;
      // console.log(this.list);
    },
    async getList1() {
      const { data: res1 } = await this.axios({
        method: "get",
        url: "/goods/getList1",
      });
      this.List1 = res1;
      console.log(this.List1);
    },

    list1AddtoList0() {
      this.list.forEach((item0, index) => {
        item0.children = [];
        this.List1.forEach((item1) => {
          if (item1.cat_pid === item0.cat_id) {
            item1.disabled = "true";
            item0.children.push(item1);
          }
        });

        this.$set(this.list, index, item0);
      });
    },

    // 修改分类 --点击
    showChange(info) {
      // console.log(info);
      this.dialog2 = !this.dialog2;
      this.editForm.cat_id = info.cat_id;
      this.editForm.cat_name = info.cat_name;
    },
    // 修改分类 --确定
    async sendChangeInfo() {
      console.log(this.editForm);
      const { data } = await this.axios({
        method: "put",
        url: "/goods/updatelist",
        data: this.editForm,
      });
      // console.log(data);
      if (data.meta.status === 200)
        return this.$message.success("修改分类成功");
      this.$refs.addFormRef.resetFields();
      this.dialog2 = !this.dialog2;
      this.resetPage();
    },

    // 删除分类
    async deleteCateItem(id) {
      const { data } = await this.axios({
        method: "DELETE",
        url: `/goods/dellist/${id}`,
      });
      // console.log(data);
      if (data.meta.status === 200)
        return this.$message.success("修改分类成功");
      this.resetPage();
    },
  },
};
</script>

<style lang="scss" scoped>
.treetable {
  margin-top: 15px;
}
.el-cascader {
  width: 100%;
  // overflow: hidden;
}

.el-cascader-panel {
  height: 300px;
}
.el-icon-circle-check {
}
.button1 {
  margin-bottom: 25px !important;
}
.elform {
  margin-right: 50px;
}
</style>
